<template>
    <!--预定房间-->
    <div>
        <!--导航栏-->
        <Header></Header>
        <div class="wrapper">
            <!--路径导航-->
            <PathNavigation :HotelPathnav="lists"></PathNavigation>
            <!--酒店介绍-->
            <Hotelintro :intro="hotel_intro"></Hotelintro>
            <!--简介-->
            <Hotelintrobd :imgesa="intro_bd"></Hotelintrobd>
        </div>
        <!--导航条-->
        <HotelNavbar></HotelNavbar >

        <!--预约-->
        <div class="container">
            <!--选择日期-->
            <HotelBooking ref="headers"></HotelBooking>
            <!--预定房间信息-->
            <Reservation :box_room="box_room_list" @changeUrl="change"></Reservation>
            <!--地图包装-->
            <HotelMaps></HotelMaps>
            <!--基本信息-->
            <Hotelinfo :sectionn="info_sectionn"></Hotelinfo>
            <!--酒店用户评论-->
            <HotelComment :comment="hotel_comment"></HotelComment>
        </div>
        <!--底部-->
        <Footer></Footer>
        <Drogue></Drogue>
        <Toolbar></Toolbar>
        <Toolbar></Toolbar>
    </div>
</template>

<script>
    import Header from "@/components/index/Header";
    import PathNavigation from "@/components/information/PathNavigation";
    import Hotelintro from "@/components/information/Hotelintro";
    import Hotelintrobd from "@/components/information/Hotelintrobd";
    import HotelNavbar from "@/components/information/HotelNavbar";
    import HotelBooking from "@/components/information/HotelBooking";
    import Reservation from "@/components/optimization/Reservation";
    import Hotelinfo from "@/components/information/Hotelinfo";
    import HotelMaps from "@/components/information/HotelMaps";
    import HotelComment from "@/components/information/HotelComment";
    import Footer from "@/components/index/Footer";
    import Drogue from "@/components/Toolbar/Drogue";
    import Toolbar from "@/components/Toolbar/Toolbar";
    export default {
        name: "Reserveations",
        components:{
            Hotelinfo,
            Header,
            PathNavigation,
            Hotelintro,
            Hotelintrobd,
            HotelNavbar,
            HotelBooking,
            Reservation,
            HotelMaps,
            HotelComment,
            Footer,
            Drogue,
            Toolbar
        },
        data(){
            return{
                lists:{
                    reserve: "成都钓鱼台精品酒店预订",
                    nainiang: "成都",
                    id:"",
                    Chengdu: "成都酒店查询"
                },
                hotel_intro:{
                    title: "成都钓鱼台精品酒店",
                    nainiang: "Diaoyutai Boutique Hotel Chengdu",
                    site: "宽巷子38-39号",      //地址
                    score: "8.9",        //评分
                    evaluate: "非常好",       //评价
                    comment: "200"   //评论数
                },
                intro_bd:{
                    img_Big: "https://b1-q.mafengwo.net/s10/M00/01/36/wKgBZ1mU3gWAZfUKAAWgBf1_Zuw75.jpeg?imageMogr2%2Fthumbnail%2F%211360x760r%2Fgravity%2FCenter%2Fcrop%2F%211360x760%2Fquality%2F90",
                    num: "129",
                     img_big:[
                        {
                            img_small: "https://b1-q.mafengwo.net/s10/M00/01/37/wKgBZ1mU3gWAfMYSAAX9GQ6NrcM78.jpeg?imageMogr2%2Fthumbnail%2F%21300x240r%2Fgravity%2FCenter%2Fcrop%2F%21300x240%2Fquality%2F90"
                        },
                        {
                            img_small: "https://b1-q.mafengwo.net/s12/M00/70/93/wKgED1wR4x-AZ5Y1AD_izzLSji4912.png?imageMogr2%2Fthumbnail%2F%21300x240r%2Fgravity%2FCenter%2Fcrop%2F%21300x240%2Fquality%2F90"
                        },
                        {
                            img_small: "https://n1-q.mafengwo.net/s10/M00/01/CE/wKgBZ1mU3huAGUKLAAMosufyjS484.jpeg?imageMogr2%2Fthumbnail%2F%21300x240r%2Fgravity%2FCenter%2Fcrop%2F%21300x240%2Fquality%2F90"
                        },
                        {
                            img_small: "https://p1-q.mafengwo.net/s10/M00/01/A2/wKgBZ1mU3hWADGT8AASKksRHGx068.jpeg?imageMogr2%2Fthumbnail%2F%21300x240r%2Fgravity%2FCenter%2Fcrop%2F%21300x240%2Fquality%2F90"
                        },
                        {
                            img_small: "https://n1-q.mafengwo.net/s10/M00/01/81/wKgBZ1mU3hCAO8AuAAp_HxQqiJ039.jpeg?imageMogr2%2Fthumbnail%2F%21300x240r%2Fgravity%2FCenter%2Fcrop%2F%21300x240%2Fquality%2F90"
                        },
                        {
                            img_small: "https://n1-q.mafengwo.net/s8/M00/29/90/wKgBpVW8nJSAaMLjAAKDwA4ajVU23.jpeg?imageMogr2%2Fthumbnail%2F%21300x240r%2Fgravity%2FCenter%2Fcrop%2F%21300x240%2Fquality%2F90"
                        }
                    ]
                },
                /*预定酒店信息*/
                book_list:{
                    booking_item:[
                        {
                            title:"https://fengxun-master.oss-cn-beijing.aliyuncs.com/booking_item/fengxun_2018%402x.png",
                            low_room: "豪华双床房-2成人-2份早餐-不可取消和更改-提前1天",
                            booking_price: "1389",
                            book: "/optimization/Reserveations"
                        },
                        {
                            title:"https://fengxun-master.oss-cn-beijing.aliyuncs.com/booking_item/booking_w100h20_2x_2.png",
                            low_room: "双床一室公寓",
                            booking_price: "1426"
                        },
                        {
                            title:"https://fengxun-master.oss-cn-beijing.aliyuncs.com/booking_item/where.png",
                            low_room: "豪华双床房 (限量抢购)",
                            booking_price: "1592"
                        },
                        {
                            title:"https://fengxun-master.oss-cn-beijing.aliyuncs.com/booking_item/xiecheng%402x.png",
                            low_room: "豪华双床房",
                            booking_price: "1481"
                        },
                        {
                            title:"https://fengxun-master.oss-cn-beijing.aliyuncs.com/booking_item/youyu.png",
                            low_room: "尊贵大床客房",
                            booking_price: "1698"
                        }
                    ]
                },
                /*酒店基本信息*/
                info_sectionn:{
                    title1: "基本信息",
                    check_in: "14:00",  //入住时间
                    check_out: "12:00",     //离店时间
                    activate: "2014",        //建成年份
                    overhaul: "2013",    //翻修年份
                    hotel_size: "50",   //酒店规模
                    //酒店攻略介绍
                    title2: "酒店攻略",
                    count: "成都钓鱼台精品酒店位于成都青羊区宽巷子，宽窄巷子内。从双流国际机场驱车约30分钟左右就到了宽窄巷子。 宽窄巷子由宽巷子、窄巷子和井巷子三条平行排列的城市老式街道及其之间的四合院群落组成。 每一间客房都有绝佳视野，高贵优雅的室内布设，带给客人超凡体验。房内都有自己的特色和布局，特设客房小酒吧，且各项设施先进齐全。 店内的御苑餐厅主营钓鱼台菜，是宴请贵宾或举办重要宴会最理想的选择，彰显主人和宾客的卓越地位。传承宫廷肴馔根脉，集粹8大菜系精髓，汇集世界各国食材的钓鱼台菜，是真正代表中华料理的殿堂级美食。 御苑大堂汇聚经典的钓鱼台菜、川粤菜、精选海鲜、日式刺身、寿司、宫廷美点等，搜罗各地食材，将食鲜与味感唤醒。一流的烹饪、优雅的环境，贴心的服务，是商务聚餐、朋友餐会的首选之所。",
                    title3: "品牌信息",
                    count1: "钓鱼台"
                },
                /*酒店评论*/
                hotel_comment:{
                    title: "315", //真实用户评论
                    num1: "8.9",
                    score1: "非常好",
                    num2: "9.3",
                    score2: "位置",
                    num3: "9.4",
                    score3: "服务",
                    num4: "8.8",
                    score4: "清洁度",
                    num5: "8.9",
                    score5: "舒适度",
                    num6: "8.9",
                    score6: "设施",
                    num7: "9.0",
                    score7: "餐饮",
                    comment_item:[
                        {

                            avatar: "https://p1-q.mafengwo.net/s12/M00/E4/09/wKgED1xGs9CABhVJAAIu6l9aJzA46.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"
                        },
                        {
                            avatar: "https://p1-q.mafengwo.net/s12/M00/E3/F9/wKgED1xGs8iAfzTrAARL2RL63yA68.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"
                        },
                        {
                            avatar: "https://b1-q.mafengwo.net/s12/M00/E3/FA/wKgED1xGs8mAWWyiAASEYp4Xr9o33.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"
                        },
                        {
                            avatar: "https://n1-q.mafengwo.net/s12/M00/E3/FB/wKgED1xGs8mACqbGAAQqNZfqQwY66.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"
                        },
                        {
                            avatar: "https://n1-q.mafengwo.net/s12/M00/E3/F7/wKgED1xGs8eACH6sAATYVz2P7mI65.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"
                        },
                        {
                            avatar: "https://p1-q.mafengwo.net/s12/M00/E3/F8/wKgED1xGs8iAUkeZAAR1Y76oLY827.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"
                        }
                    ]
                },
                /*预定房间*/
                box_room_list:{

                    ota_room_box:[
                        /*豪华双床房*/
                        {
                            Id:"",
                            room_name: "豪华双床房",
                            td_person: "2住客",
                            td_policy1: "含2人份早餐",
                            td_policy2: "不可取消和变更",
                            td_policy3: "在线付",
                            td_policy4: "二次确认",
                            td_price: "1389",
                            td_pic: "(已含税)",
                            hrefs: "/optimization/HeaderYouyu"
                        },
                    ],
                    /*尊贵客房*/
                    ota_room_boxs:[
                        {
                            Id:"",
                            room_name: "尊贵客房",
                            td_person: "2住客",
                            td_policy1: "含2人份早餐",
                            td_policy2: "不可取消和变更",
                            td_policy3: "在线付",
                            td_policy4: "二次确认",
                            td_price: "1490",
                            td_pic: "(已含税)"
                        }
                    ],
                    ota_room_boxsx: [
                        {
                            Id:"",
                            room_names: "尊贵客房",
                            td_persons: "2住客",
                            td_policy1s: "含2人份早餐",
                            td_policy2s: "不可取消和变更",
                            td_policy3s: "在线付",
                            td_policy4s: "二次确认",
                            td_prices: "1530",
                            td_pics: "(已含税)"
                        }
                    ]
                }
            };
        },mounted(){
            this.Details(this.$route.query.id);
        },
        methods:{
            // eslint-disable-next-line no-unused-vars
            change:function(id,number){
                // eslint-disable-next-line no-unused-vars
                let hotelId=this.lists.id;
                this.$refs.headers.optionDate();
                let sCheckIn=this.$refs.headers.sCheckIn;
                let sCheckOut=this.$refs.headers.sCheckOut;
                let sRoom=this.$refs.headers.sRoom;
                this.$router.push({ path:'/optimization/HeaderYouyu?id='+id+"&hotelId="+hotelId+"&sCheckIn="+sCheckIn+"&sCheckOut="+sCheckOut+"&sRoom="+sRoom+"&number="+number});
            },
            Details:function (id) {
                const _this=this;
                if (id!==null){
                    this.$axios.get(this.SEARCH+'/details/reserve?hotelId='+id).then(
                        function (resp) {
                            if (resp!==null){
                                //酒店id
                                _this.lists.id=resp.data["data"].hotels.hotelId;
                                //图片 1
                                _this.intro_bd.img_Big=resp.data["data"].picture[0];
                                //图片数组
                                resp.data["data"].picture.some((item, i) =>{
                                    if (i>0){
                                        _this.intro_bd.img_big[i-1].img_small=item;
                                    }
                                })
                                //酒店名称 成都钓鱼台精品酒店预订
                                _this.lists.reserve=resp.data["data"].hotels.hotelName;
                                //城市
                                _this.lists.nainiang=resp.data["data"].city;
                                //成都酒店查询
                                _this.lists.Chengdu=resp.data["data"].city+"酒店查询";
                                //标题
                                _this.hotel_intro.title=resp.data["data"].hotels.hotelName;
                                //酒店英文名称
                                _this.hotel_intro.nainiang=resp.data["data"].hotels.titleeg;
                                //地址
                                _this.hotel_intro.site=resp.data["data"].hotels.hotelAddress;
                                //评分
                                _this.hotel_intro.score=resp.data["data"].hotels.num1;
                                //评价
                                if (resp.data["data"].hotels.num1>=8){
                                    _this.hotel_intro.evaluate="非常好";
                                }else if (resp.data["data"].hotels.num1>5){
                                    _this.hotel_intro.evaluate="一般";
                                }else{
                                    _this.hotel_intro.evaluate="差";
                                }
                                //评论数
                                _this.hotel_intro.comment=resp.data["data"].hotels.num2;
                                //房间价格和信息
                                _this.box_room_list.ota_room_box[0].Id=resp.data["data"].hotelRooms[0].id;
                                _this.box_room_list.ota_room_box[0].room_name=resp.data["data"].hotelRooms[0].roomType;
                                _this.box_room_list.ota_room_box[0].td_price=resp.data["data"].hotelRooms[0].price;
                                _this.box_room_list.ota_room_box[0].td_person=resp.data["data"].hotelRooms[0].resident+"住客";
                                _this.box_room_list.ota_room_box[0].td_policy1s="含"+resp.data["data"].hotelRooms[0].resident+"人份早餐"

                                _this.box_room_list.ota_room_boxs[0].Id=resp.data["data"].hotelRooms[1].id;
                                _this.box_room_list.ota_room_boxs[0].room_name=resp.data["data"].hotelRooms[1].roomType;
                                _this.box_room_list.ota_room_boxs[0].td_price=resp.data["data"].hotelRooms[1].price;
                                _this.box_room_list.ota_room_boxs[0].td_person=resp.data["data"].hotelRooms[1].resident+"住客";
                                _this.box_room_list.ota_room_boxs[0].td_policy1s="含"+resp.data["data"].hotelRooms[1].resident+"人份早餐"

                                _this.box_room_list.ota_room_boxsx[0].Id=resp.data["data"].hotelRooms[2].id;
                                _this.box_room_list.ota_room_boxsx[0].room_name=resp.data["data"].hotelRooms[2].roomType;
                                _this.box_room_list.ota_room_boxsx[0].td_price=resp.data["data"].hotelRooms[2].price;
                                _this.box_room_list.ota_room_boxsx[0].td_person=resp.data["data"].hotelRooms[2].resident+"住客";
                                _this.box_room_list.ota_room_boxsx[0].td_person="含"+resp.data["data"].hotelRooms[2].resident+"人份早餐"

                            }
                        }
                    )
                }
            }
        },created:function () {
            // eslint-disable-next-line no-undef
            if(typeof M !== "undefined" && typeof M.loadResource === "function") {
                //M.loadResource("https://fengxun-master.oss-cn-beijing.aliyuncs.com/mengxun_mx.js?Expires=1603941031&OSSAccessKeyId=TMP.3Ke9QgbP7UVV5H7HpPQxS9gfjUTf8JHy8oP6FDwnKTLUydXwNYsuEh6epb4HRiCjXHg5QH51bCmsMvH67RRog4iq8NdxJU&Signature=ZTCavS9ZDo6yuqS2QChjC2%2Bb83M%3D");
                // eslint-disable-next-line no-undef
                M.loadResource("https://js.mafengwo.net/js/cv/js+Dropdown:js+pageletcommon+pageHeadUserInfoWWWNormal:js+jquery.tmpl:js+M+module+InputListener:js+M+module+SuggestionXHR:js+M+module+DropList:js+M+module+Suggestion:js+M+module+MesSearchEvent:js+SiteSearch:js+AHeader:js+M+module+PageAdmin:js+M+module+Storage:js+M+module+Cookie:js+M+module+ResourceKeeper:js+jquery.jgrowl.min:js+AMessage:js+M+module+dialog+Layer:js+M+module+dialog+DialogBase:js+M+module+dialog+Dialog:js+M+module+dialog+alert:js+M+module+FrequencyVerifyControl:js+M+module+FrequencySystemVerify:js+ALogin:js+M+module+ScrollObserver:js+M+module+QRCode:js+AToolbar:js+ACnzzGaLog:js+ARecruit:js+ALazyLoad:js+jquery.scrollTo:js+MouseTip:js+hotel+module+Hash:js+hotel+module+ModuleProvider:js+hotel+module+ImageLoader:js+hotel+module+Album:js+hotel+module+AlbumComment:js+hotel+module+Log:js+hotel+module+FavDialog:js+hotel+mfwmap+mfwmap-util:js+hotel+mfwmap+mfwmap-event:js+hotel+mfwmap+mfwmap-runtime-google:js+hotel+mfwmap+mfwmap-runtime-amap:js+hotel+mfwmap+mfwmap-runtime-leaflet:js+hotel+mfwmap+mfwmap:js+hotel+mfwmap+mfwmap-overlays:js+hotel+module+ListTips:js+xdate:js+hotel+module+BookingDate:js+hotel+info:js+hotel+module+FestivalDateConfig:js+jquery-ui-core:js+jquery-ui-datepicker:js+hotel+module+DateRangePicker:js+hotel+module+BookingGuests:js+hotel+module+NumberGuestsPicker:js+hotel+module+BookingInfo:js+hotel+info_booking:js+M+module+Pagination:js+M+module+TopTip:js+hotel+module+ReportDialog:js+hotel+info_comment:js+hotel+pc_app_guide^YlFVSg^1584071349.js");
            }
            //eslint-disable-next-line no-undef
            if (typeof M !== "undefined" && typeof M.loadResource === "function") {
                // eslint-disable-next-line no-undef
                M.loadResource("https://js.mafengwo.net/js/cv/js+Dropdown:js+pageletcommon+pageHeadUserInfoWWWNormal:js+jquery.tmpl:js+M+module+InputListener:js+M+module+SuggestionXHR:js+M+module+DropList:js+M+module+Suggestion:js+M+module+MesSearchEvent:js+SiteSearch:js+AHeader:js+jquery.jgrowl.min:js+hotel+mfwmap+mfwmap-util:js+hotel+mfwmap+mfwmap-event:js+hotel+mfwmap+mfwmap-runtime-google:js+hotel+mfwmap+mfwmap-runtime-amap:js+hotel+mfwmap+mfwmap-runtime-leaflet:js+hotel+mfwmap+mfwmap:js+hotel+mfwmap+mfwmap-overlays:js+hotel+module+ListTips:js+M+module+Storage:js+hotel+module+Log:js+hotel+module+Search:js+hotel+module+ModuleProvider:js+hotel+module+Captcha:js+hotel+module+Dialog:js+hotel+module+Hash:js+xdate:js+hotel+module+BookingDate:js+hotel+module+BookingGuests:js+hotel+list_mvc_model:js+corelib+handlebars-2.0.0:js+hotel+module+FestivalDateConfig:js+jquery-ui-core:js+jquery-ui-datepicker:js+hotel+module+DateRangePicker:js+hotel+module+NumberGuestsPicker:js+hotel+list_mvc_filter_view:js+jquery.scrollTo:js+M+module+dialog+Layer:js+M+module+dialog+DialogBase:js+M+module+dialog+Dialog:js+M+module+dialog+alert:js+hotel+module+FavDialog:js+hotel+list_mvc_data_view:js+hotel+list_v6:js+hotel+pc_app_guide:js+M+module+PageAdmin:js+M+module+Cookie:js+M+module+ResourceKeeper:js+AMessage:js+M+module+FrequencyVerifyControl:js+M+module+FrequencySystemVerify:js+ALogin:js+M+module+ScrollObserver:js+M+module+QRCode:js+AToolbar:js+ACnzzGaLog:js+ARecruit:js+ALazyLoad^YlFSRQ^1584071349.js");
            }
        }
    }
</script>

<style scoped>
    .wrapper{
        width: 1000px;
        margin: 0 auto;
    }
</style>